<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'top': this.$safeTop + 'px'}">
			<image class="navigator-button" src="/static/backArrow.png" @click="back()"></image>
			<view class="edit-shop" @click="editShop()">编辑资料</view>
		</view>
		<scroll-view scroll-y="true" class="shop-box" v-if="shopInfo">
			<view class="shop-img-box">
				<uni-swiper-dot class="swiper-box" :info="imgs" :current="index" mode="round" :dots-styles="dotsStyles">
					<swiper class="shop-swiper" autoplay="true" @change="indexChange">
						<swiper-item v-for="img of imgs">
							<image class="shop-img" :src="img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="labels-box">
						<view class="label" v-for="label of labels">{{ label }}</view>
					</view>
				</uni-swiper-dot>
			</view>
			<view class="title-row">
				<view class="title-text">{{ shopInfo.name }}</view>
				<view class="score-box">
					<uni-rate :value="shopInfo.score" color="#F6F7F9" active-color="#FFD048" readonly="true" :size="18" />
				</view>
			</view>
			<view class="service-row">
				<view class="service-list">
					<view class="service-item" v-for="item of service">{{ item }}</view>
				</view>
				<view class="score-box">{{ shopInfo.score }}</view>
			</view>
			<view class="time-row">{{ `${startTime}-${endTime}营业` }}</view>
			<view class="price-row">
				<view class="price-text">￥{{ shopInfo.cost }}<text class="price-unit">/人</text></view>
				<view class="like-text">{{ shopInfo.cost }}人收藏</view>
			</view>
			<view class="location-box">
				<image class="location-img" src="/static/fp-mapCheck.png"></image>
				<view class="location-content">
					<text class="location-title">{{ poi.name }}</text>
					<text class="location-text">{{ poi.address }}</text>
				</view>
				<image class="location-arrow" src="/static/enterArrowW.png"></image>
			</view>
			<view class="introduction-box">
				<view class="introduction-title">店铺简介</view>
				<view class="introduction-text">{{ shopInfo.description }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopInfo: {},
				labels: [],
				service: [],
				imgs: [],
				poi: {},
				startTime: '',
				endTime: '',
				index: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .5)',
					border: 'none',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
					selectedBorder: 'none'
				}
			};
		},
		onLoad(e) {
			this.getShopInfo(e.id);
		},
		methods: {
			getShopInfo(id) {
				const params = {
					id: id
				}
				this.$apis.getShopDetail(params).then(res => {
					if (res.code === 0) {
						this.shopInfo = res.data;
						this.labels = this.shopInfo.labels.split(',');
						this.service = this.shopInfo.serviceName.split(',');
						this.imgs = this.shopInfo.smallImages.split(',');
						let placeList = this.shopInfo.place.split(',');
						this.poi = {
							name: placeList[0],
							address: placeList[1],
							location: {
								latitude: this.shopInfo.lat,
								longitude: this.shopInfo.lon
							}
						}
						let timeList = this.shopInfo.businessHours.split(',');
						this.startTime = timeList[0];
						this.endTime = timeList[1];
					}
				});
			},
			back() {
				uni.navigateBack();
			},
			indexChange(event) {
				this.index = event.detail.current;
			},
			editShop() {
				uni.navigateTo({
					url: `/pages/shopCheck?id=${this.shopInfo.id}`
				})
			}
 		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.navigator-bar {
			position: absolute;
			width: calc(100vw - 64rpx);
			padding: 0 32rpx 0 32rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			z-index: 999;

			.navigator-button {
				width: 80rpx;
				height: 80rpx;
			}
			
			.edit-shop {
				width: 144rpx;
				height: 64rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
		
		.shop-box {
			width: 100%;
			height: 100%;
			
			.shop-img-box {
				width: 100vw;
				height: 700rpx;
				position: relative;
			
				.swiper-box {
					width: 100%;
					height: 100%;
			
					.shop-swiper {
						width: 100%;
						height: 100%;
			
						.shop-img {
							width: 100vw;
							height: 700rpx;
							border-bottom-left-radius: 48rpx;
							border-bottom-right-radius: 48rpx;
							z-index: -1;
						}
					}
				}
			
				.labels-box {
					position: absolute;
					bottom: 32rpx;
					left: 32rpx;
			
					.label {
						display: inline-block;
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 20rpx;
						padding: 4rpx 16rpx 4rpx 16rpx;
						margin-right: 4rpx;
					}
				}
			}
		
			.title-row {
				width: 654rpx;
				margin: 32rpx 0 0 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				
				.title-text {
					width: 70%;
					font-size: 44rpx;
					font-weight: bold;
					color: #222222;
				}
				
				.score-box {
					margin-top: 12rpx;
				}
			}
		
			.service-row {
				width: 654rpx;
				margin: 6rpx 0 0 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				
				.service-list {
					width: 70%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 10rpx;
					
					.service-item {
						width: 120rpx;
						height: 36rpx;
						background: #F6F7F9;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #222222;
						line-height: 36rpx;
						margin-right: 16rpx;
						text-align: center;
					}
				}
				
				.score-box {
					width: 28%;
					font-size: 44rpx;
					font-weight: bold;
					color: #FF5E2E;
					text-align: center;
					line-height: 44rpx;
				}
			}
			
			.time-row {
				margin: 18rpx 0 0 48rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
			}
			
			.price-row {
				width: 654rpx;
				margin: 16rpx 0 0 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.price-text {
					font-size: 44rpx;
					font-weight: bold;
					color: #FF5E2E;
					
					.price-unit {
						font-size: 28rpx;
					}
				}
				
				.like-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			
			.location-box {
				width: 654rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 28rpx;
				margin-top: 30rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;
			
				.location-img {
					width: 80rpx;
					height: 80rpx;
					margin-left: 32rpx;
				}
			
				.location-content {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 450rpx;
					margin-left: 32rpx;
			
					.location-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #222222;
						width: 450rpx;
					}
			
					.location-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						width: 450rpx;
						margin-top: 8rpx;
						line-height: 24rpx;
					}
				}
			
				.location-arrow {
					width: 16rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}
			
			.introduction-box {
				width: 654rpx;
				margin-top: 48rpx;
				margin-left: 48rpx;
			
				.introduction-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #222222;
					line-height: 36rpx;
				}
			
				.introduction-text {
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
</style>
